<template>
  <div class="page-layout">
    <div v-if="!route.meta.hidePageHeader" class="page-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ route.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="page-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<style scoped>
.page-layout {
  margin-top: 120px;
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  margin-top: 16px;
}

.page-title h1 {
  font-size: 28px;
  color: var(--el-text-color-primary);
  margin: 8px 0;
}

.subtitle {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0;
}

.page-content {
  margin-top: 24px;
}
</style>
